<template>
    <PageView>
        <a-card title="列表">
            <a-table
                :loading="loading"
                :columns="columns"
                :dataSource="data"
                :pagination="false"
                bordered :scroll="{x:true}">
            </a-table>
        </a-card>
    </PageView>
</template>

<script type="text/jsx">
    import Config from '../../api/Config'

    export default {
        name: 'dong',
        data () {
            return {
                loading: true,
                columns: [
                    {
                        title: '等级',
                        dataIndex: 'name',
                        customRender: (v) => <a>{v}</a>
                    },
                    {
                        title: '代数',
                        dataIndex: 'dai_num',
                        customRender:(v,r)=>{
                            return r.isEdit?(
                                <a-input placeholder="请输入代数" defaultValue={v} onChange={(e)=>{r.dai_num = e.target.value}}/>
                            ):(
                                v
                            )
                        }
                    },
                    {
                        title: '收益',
                        dataIndex: 'shouyi',
                        customRender:(v,r)=>{
                            return r.isEdit?(
                                <a-input placeholder="请输入收益" defaultValue={v} onChange={(e)=>{r.shouyi = e.target.value}}/>
                            ):(
                                v
                            )
                        }
                    },
                    {
                        title: '直推人数',
                        dataIndex: 'pid_num',
                        customRender:(v,r)=>{
                            return r.isEdit?(
                                <a-input placeholder="请输入直推人数" defaultValue={v} onChange={(e)=>{r.pid_num = e.target.value}}/>
                            ):(
                                v
                            )
                        }
                    },
                    {
                        title: '小区业绩',
                        dataIndex: 'yeji',
                        customRender:(v,r)=>{
                            return r.isEdit?(
                                <a-input placeholder="请输入yeji" defaultValue={v} onChange={(e)=>{r.yeji = e.target.value}}/>
                            ):(
                                v
                            )
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 110,
                        customRender: (v) => {
                            return (
                                <a-button-group>
                                    <a-button
                                        type={v.isEdit?`danger`:`primary`}
                                        onClick={()=>{
                                            v.isEdit?this.changeConfig(v):v.isEdit = true
                                        }}>
                                        {v.isEdit?`确定`:`编辑`}
                                    </a-button>
                                    {v.isEdit?(
                                        <a-button type="danger" onClick={()=>{v.isEdit = false}}>取消</a-button>
                                    ):""}

                                </a-button-group>
                            )
                        }
                    }
                ],
                data: [],
            }
        },
        activated () {
            this.getList()
        },
        methods: {
            getList () {
                this.loading = true
                Config.niticLevel().then(res => {
                    this.data = res.list.map((value, key) => {
                        value.isEdit = false
                        return { ...value, key }
                    })
                    this.loading = false
                })
            },
            changeConfig(v){
                this.$confirm({
                    title: `修改`,
                    content: `确定要修改此等级吗?`,
                    centered: true,
                    onOk: () => {
                        return new Promise((resolve, reject) => {
                            Config.saveNitic(v).then(res => {
                                resolve()
                                this.getList()
                            }).catch(res => {
                                reject()
                            })
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .inputGroup {
        > div {
            margin-bottom: 20px;
        }
    }
</style>